<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-none-shadow mui-background-white mui-border-bottom">
			<a href="javascript:void(0);" class="mui-color-three mui-action-back mui-text-white mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content mui-background-white mui-padding-20">
			<a>
                 <i id="bofang" class="iconfont icon-play-o"></i>   <!--就是一个播放按钮没啥特殊的-->
             </a>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script>
		 mui.plusReady(function(){
                      p=null;
                      function toPlay(path){     //播放方法
                          p = plus.audio.createPlayer(path);//创建一个音频对象
                          p.play( function () {    //成功的回调函数ps:一首歌播放完成后执行
                              if(i==2){             //判断下一曲该播放哪一个
                              i=0;
                              }else{
                                  i++;
                             }
                             toPlay(pat[i]);
                         }, function ( e ) {
                             alert( "Audio play failed: " + e.message );//播放失败的回调函数
                         } );

                     }
                     function toPause(){  //暂停方法
                         p.pause();
                     }
                     function toResume(){  //继续方法
                         p.resume();
                     }
                     function to(s){
                         p.seekTo(s);
                     }
                     var i=0;
                     var pat = ["ziyuan/aaa.mp3",
                                 "ziyuan/bbb.mp3",
                                 "ziyuan/ccc.mp3"];//曲目数组
                     //播放图标
                     var bofang = document.getElementById("bofang");
                    bofang.addEventListener("tap",function(e){
                         e.stopPropagation();  //阻断事件冒泡
                         if(this.className=="iconfont icon-play-o"){  //判断图标的样子
                             //如果已经创建音频对象点击时继续，没有创建者执行play方法
                             if(!p){toPlay(pat[i]);}else{toResume()}
                             this.className="iconfont icon-zanting"; //改变图标样式
                         }else{
                             toPause();        //暂停方法
                             this.className="iconfont icon-play-o";
                         }
                     })

                     //播放页
                     document.getElementById("foot").addEventListener("tap",function(){
                         mui.openWindow({        //打开播放页    id为foot的标签请自行创建，前面html代码没写
                             url:"bofangye.html",
                             id:"bofangye.html",
                             styles:{
                               top:0,
                               bottom:0,
                             },extras:{
                                 name:p,        //将音频对象p传到播放页
                             }
                         })
                     })

                 //以下三个事件是页面间的事件，是播放页传参数过来通过参数值判断来执行，看不懂请配合播放页代码一起看
                 window.addEventListener('send',function(event){
                     //监听send事件
                       //获得事件参数
                       var a = event.detail.pause;
                       if(!p){    //判断是否存在p
                           toPlay(pat[i]);  //不存在执行play方法
                       }else if(a%2==1){    //根据a的值判断是暂停还是继续
                           toPause();
                       }else{
                           toResume();
                       }
                 });
                 window.addEventListener('pre',function(event){
 //                    监听pre事件
                     if(i==0){i=2}else{i--}//i为曲目数组的下标
                     if(p){p.stop();}    //音频对象p存在的话停止掉，然后播放下一曲，不存在则直接播放下一曲
                       toPlay(pat[i]);
                 });
                 window.addEventListener('next',function(event){
                     //监听next事件
                         if(i==2){
                            i=0;
                         }else{
                             i++;
                        }
                        if(p){p.stop()};
                         toPlay(pat[i]);
                 });
                 })
		</script>
	</body>

</html>